<template>
  <div>
    <div class="block">
      <div>
        <span>当前时间: {{ currentTime }}</span>
      </div>
      <el-date-picker
        v-model="value"
        type="daterange"
        align="right"
        unlink-panels
        range-separator=" 至 "
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import { time } from 'echarts';
import moment from 'moment';
import 'moment/locale/zh-cn';
export default {
  data () {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value: '',
      currentTime: ''
    };
  },
  created () {
    this.updateCurrentTime();
    setInterval(this.updateCurrentTime, 1000 * 60); // 每分钟更新一次当前时间
  },
  methods: {
    updateCurrentTime () {
      this.currentTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
      // 获取当前时间并格式化
    }
  }
};
</script>

<style scoped>
.block /deep/ .el-range-separator {
  width: 24px; /** 解决“至”显示不完全 */
}

.current-time {
  margin-top: 10px;
  text-align: center;
  color: #909399; /* 可以根据需要调整颜色 */
}
</style>